<script setup>
import axios from "axios";
import { onMounted, ref } from "vue";
import GoodsItem from "@/views/home/components/GoodsItem.vue";

// 商品列表
const clothesList = ref([])
// 分页参数
const pageNo = ref(1)
const pageSize = ref(20)
const total = ref(0)

const showAllClothes = () => {
  axios.get('/api/showAllClothes?pageNo=' + pageNo.value + '&pageSize=' + pageSize.value).then(res => {
    clothesList.value = res.data.data.clothesPages;
    total.value = res.data.data.total
  })
}

// 更新表格页面显示量
const handleSizeChange = (val) => {
  pageSize.value = val
  pageNo.value = 1
  showAllClothes()
}
// 更新页码
const handleCurrentChange = (val) => {
  pageNo.value = val
  showAllClothes()
}
onMounted(() => {
  showAllClothes();
})
</script>

<template>
  <div class="home-panel">
    <div class="container">
      <div class="head">
        <!-- 主标题和副标题 -->
        <h3>
          人气推荐<small>人气爆款，不容错过</small>
        </h3>
      </div>
      <div class="ref-goods">
        <div class="body">
          <GoodsItem v-for="clothes in clothesList" :clothes="clothes" :key="clothes.clNo"/>
        </div>
      </div>

      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total * pageSize"
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>

  </div>

</template>

<style scoped>
.home-panel {
  padding-bottom: 20px;
  width: 100%;
  background-color: #f5f5f5;


  .container {
    background: #fff;
    padding-bottom: 50px;
  }

  .head {
    max-width: 1200px;
    padding: 40px 0;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;

    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: normal;
      margin-left: 6px;
      height: 35px;
      line-height: 35px;
      color: #e180a4;

      small {
        font-size: 16px;
        color: #999;
        margin-left: 20px;
      }
    }

  }

  .ref-goods {
    background-color: #fff;
    margin-top: 20px;
    position: relative;

    .body {
      margin: 0 auto;
      max-width: 1200px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 0 40px 30px;
    }
  }

  .el-pagination {
    justify-content: center
  }

  :deep .el-pagination .btn-prev:hover,
  :deep .el-pagination .btn-next:hover {
    color: #e180a4 !important;
  }

  :deep(.el-pagination .el-pager li:hover)   {
    color: #e180a4;
  }

  :deep(.el-pagination .el-pager li.is-active) {
    background-color: #ffd2d8 !important;
    color: #333;
  }

}
</style>